<template>
  <div class="nav">
    <div style="width: 100%;height: 60px;position: fixed;background-color: white">
      <div style="width: 1350px;height: 50px;background-color: white;margin: auto;">
        <div style="float: left;margin-top: 10px">
          <img src="../assets/weibo_logo.jpg" style="width: 90px;height: 30px" alt="">
        </div>
        <div style="float: left;margin-left: 10px;margin-top: 10px">
          <el-input placeholder="请输入内容" v-model="mix" style="width: 200px;" class="input-with-select">
            <el-button slot="append" size="small"  @click="" icon="el-icon-search"></el-button>
          </el-input>
        </div>

        <div class="icon_all" style="float: left;width: 600px;height: 50px;margin-left: 66px;margin-top: 10px">
            <div class="icon_list" style="font-size: 30px"><i  class="el-icon-house"></i></div>
            <div class="icon_list" style="font-size: 30px"><i  class="el-icon-video-camera"></i></div>
            <div class="icon_list" style="font-size: 30px"><i  class="el-icon-cpu"></i></div>
            <div class="icon_list" style="font-size: 30px"><i  class="el-icon-message"></i></div>
            <div class="icon_list" style="font-size: 30px"><i  class="el-icon-user"></i></div>
        </div>

        <div style="float: right;margin-top: 10px;margin-right: 50px">
          <div v-if="token==null">
            <el-button style="background-color: #ff8200" type="warning" size="medium" round @click="LoginFormVisible = true">登录</el-button>
            <el-button  type="" size="medium" round @click="RegisterFormVisible = true">注册</el-button>
          </div>
          <div v-else>
            <span>{{token}}</span>|
            <span @click="exit()"><a href="">退出</a></span>
          </div>

        </div>

        <!--登录页面-->
        <el-dialog title="登录界面"  :append-to-body='true' :visible.sync="LoginFormVisible" width="30%" center>
          <el-form :model="User" status-icon :rules="rules" ref="ruleForm" >
            <el-form-item label="用户账号：" prop="username" :label-width="formLabelWidth">
              <el-input style="width: 300px" v-model="User.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户密码："prop="password" :label-width="formLabelWidth">
              <el-input style="width: 300px" type="password" v-model="User.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="margin-left: 50px">
            <el-button style="width: 100px" @click="LoginFormVisible = false">取 消</el-button>
            <el-button style="width: 100px" type="primary" @click="submitForm('ruleForm')">登 录</el-button>
          </div>
        </el-dialog>

        <!--注册页面-->
        <el-dialog title="注册界面"  :append-to-body='true' :visible.sync="RegisterFormVisible" width="30%" center>
          <el-form :model="People" status-icon :rules="rules" ref="ruleForm1" >
            <el-form-item label="输入账号：" prop="username" :label-width="formLabelWidth">
              <el-input style="width: 300px" v-model="People.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="输入密码：" prop="password" :label-width="formLabelWidth">
              <el-input type="password" style="width: 300px" v-model="People.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="margin-left: 50px">
            <el-button style="width: 100px" @click="RegisterFormVisible = false">取 消</el-button>
            <el-button style="width: 100px" type="primary" @click="RegisterForm('ruleForm1')">注 册</el-button>
          </div>
        </el-dialog>


      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Nav",
      data(){
          return{
            token:'',
            User: {},
            People:{},
            mix:'',
            LoginFormVisible: false,//登录页面
            RegisterFormVisible: false,//修改页面
            formLabelWidth: '100px',
            rules:{
              username:[
                { required: true, message: '请输入账号名称', trigger: 'blur' },
                { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
              ],
              password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
              ]
            }
          }
      },
      methods:{
        /*退出*/
        exit(){
          localStorage.removeItem("name")
          location. reload()
        },
        /*token*/
        findToken(){
          this.token = localStorage.getItem("name")
        },
        /*登录*/
        submitForm(formName) {
          this.$refs[formName].validate(async  (valid) => {
            if (valid) {
              if(!this.User.username){alert('请输入账号');return false}
              if(!this.User.password){alert('请输入密码');return false}
              let _this = this
              this.$axios.post("http://localhost:8050/user/login",this.User).then(function (res) {
                //清空本次保存数据
                if(res.data!=-1){
                  localStorage.setItem("name",_this.User.username)
                  _this.$options.methods.findToken();
                  alert("登录成功！")
                  _this.User = {};
                  _this.LoginFormVisible =false
                  location. reload()
                }else {
                  alert("账号或密码错误！");
                  _this.User = {};
                }
              }).catch(function (err) {
                localStorage.removeItem('name')
                alert("登陆失败！");
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        /*注册*/
        RegisterForm(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              if(!this.People.username){alert('请输入用户名称');return false}
              if(!this.People.password){alert('请输入用户密码');return false}
              console.log(this.People)
              let _this = this
              this.$axios.post("http://localhost:8050/user/setUser",this.People).then(function () {
                //清空本次保存数据
                alert("注册成功！请重新登录！")
                _this.People = {};
                location.reload()
              }).catch(function (err) {
                // alert("用户信息添加失败，请稍后再试")
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
      },
      created() {
        this.findToken();
      }
    }
</script>

<style scoped>
  .icon_list{
    float: left;
    margin-left: 66px;
  }
  .icon_list i:hover{
    color: orange;
    background-color: gainsboro;
  }
</style>
